<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="/template.xhtml">

	<ui:define name="title">
		EComanda - Efetuar Pagamento
	</ui:define>

	<ui:define name="content">

		<h:form id="efetuarPagamentoForm">

			<p:panel id="efetuarPagamentoPanel" header="Efetuar Pagamento"
				style="margin-top:auto; margin-bottom:auto; margin-left: auto; margin-right: auto; heigth: 500px">


				<p:messages id="messages" />

				<h:panelGrid id="efetuarPagamentoGrid" columns="2">

					<h:panelGrid id="selecionarComandasGrid" columns="1">

						<h:panelGrid id="adicionarComandaGrid" columns="3">
							<h:outputLabel for="comandaInput" value="Comanda*: " />
							<p:inputMask id="comandaInput"
								value="#{efetuarPagamentoBean.comanda}" required="true"
								mask="9?9999999" maxlength="8">
								<f:converter converterId="comandaConverter" />
							</p:inputMask>
							<p:commandButton value="Adicionar Comanda"
								actionListener="#{efetuarPagamentoBean.adicionarComanda}"
								update=":efetuarPagamentoForm:efetuarPagamentoPanel" />
						</h:panelGrid>

						<p:dataTable id="comandasAdicionadasTable" var="op"
							value="#{efetuarPagamentoBean.operacoes}">

							<p:column headerText="Comanda">
								<p:outputLabel value="#{op.comanda.idComanda}" />
							</p:column>

							<p:column headerText="Remover">
								<p:commandButton icon="ui-icon-trash" title="Remover Comanda"
									actionListener="#{efetuarPagamentoBean.removerComanda(op.comanda.idComanda)}"
									update=":efetuarPagamentoForm:efetuarPagamentoPanel" />
							</p:column>

						</p:dataTable>

					</h:panelGrid>

					<h:panelGrid id="valoresGrid" columns="2">
						<p:outputLabel value="Valor Total: R$" for="valorTotalInput" />
						<p:inputText id="valorTotalInput"
							value="#{efetuarPagamentoBean.valorTotal}" readonly="true" />

						<p:outputLabel value="Desconto: R$" for="descontoInput" />
						<p:inputText id="descontoInput"
							value="#{efetuarPagamentoBean.desconto}">
							<p:ajax event="change"
								update=":efetuarPagamentoForm:efetuarPagamentoPanel" />
						</p:inputText>

						<p:outputLabel value="Valor Pago: R$" for="valorPagoInput" />
						<p:inputText id="valorPagoInput"
							value="#{efetuarPagamentoBean.valorPago}">
							<p:ajax event="change"
								update=":efetuarPagamentoForm:efetuarPagamentoPanel" />
						</p:inputText>

						<p:outputLabel value="Forma de Pagamento: "
							for="formaPagementoSelect" />
						<p:selectOneMenu id="formaPagementoSelect"
							value="#{efetuarPagamentoBean.formaPagamentoId}" required="true">
							<f:selectItem itemLabel="" itemValue="" />
							<f:selectItems value="#{efetuarPagamentoBean.formaPagamentos}" var="fp"
							itemLabel="#{fp.dsFormaPagamento}" itemValue="#{fp.idFormaPagamento}" />
						</p:selectOneMenu>

					</h:panelGrid>

				</h:panelGrid>

			</p:panel>

		</h:form>

	</ui:define>
</ui:composition>

</html>